/**
 * 截图、拍照图标
 * @param ratio 画布大小比例
 * @param color 颜色
 * @returns 数据地址
 */
const ScreenshotImage = (ratio?: number, color?: string): string => {
    const r = ratio || 2;
    const col = color || '#ffffff';
    const canvas = document.createElement('canvas');
    canvas.width = 20 * r;
    canvas.height = 20 * r;
    const ctx = canvas.getContext('2d')!;
    ctx.save();
    ctx.strokeStyle = "rgba(0,0,0,0)";
    ctx.miterLimit = 4;
    ctx.fillStyle = "rgba(0,0,0,0)";
    ctx.save();
    ctx.fillStyle = col;
    ctx.beginPath();
    ctx.moveTo(6.5 * r, 5 * r);
    ctx.bezierCurveTo(5.67157 * r, 5 * r, 5 * r, 5.67157 * r, 5 * r, 6.5 * r);
    ctx.lineTo(5 * r, 8.5 * r);
    ctx.bezierCurveTo(5 * r, 8.77614 * r, 5.22386 * r, 9 * r, 5.5 * r, 9 * r);
    ctx.bezierCurveTo(5.77614 * r, 9 * r, 6 * r, 8.77614 * r, 6 * r, 8.5 * r);
    ctx.lineTo(6 * r, 6.5 * r);
    ctx.bezierCurveTo(6 * r, 6.22386 * r, 6.22386 * r, 6 * r, 6.5 * r, 6 * r);
    ctx.lineTo(8.5 * r, 6 * r);
    ctx.bezierCurveTo(8.77614 * r, 6 * r, 9 * r, 5.77614 * r, 9 * r, 5.5 * r);
    ctx.bezierCurveTo(9 * r, 5.22386 * r, 8.77614 * r, 5 * r, 8.5 * r, 5 * r);
    ctx.lineTo(6.5 * r, 5 * r);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
    ctx.restore();
    ctx.save();
    ctx.fillStyle = col;
    ctx.beginPath();
    ctx.moveTo(11.5 * r, 5 * r);
    ctx.bezierCurveTo(11.2239 * r, 5 * r, 11 * r, 5.22386 * r, 11 * r, 5.5 * r);
    ctx.bezierCurveTo(11 * r, 5.77614 * r, 11.2239 * r, 6 * r, 11.5 * r, 6 * r);
    ctx.lineTo(13.5 * r, 6 * r);
    ctx.bezierCurveTo(13.7761 * r, 6, 14 * r, 6.22386 * r, 14 * r, 6.5 * r);
    ctx.lineTo(14 * r, 8.5 * r);
    ctx.bezierCurveTo(14 * r, 8.77614 * r, 14.2239 * r, 9 * r, 14.5 * r, 9 * r);
    ctx.bezierCurveTo(14.7761 * r, 9 * r, 15 * r, 8.77614 * r, 15 * r, 8.5 * r);
    ctx.lineTo(15 * r, 6.5 * r);
    ctx.bezierCurveTo(15 * r, 5.67157 * r, 14.3284 * r, 5 * r, 13.5 * r, 5 * r);
    ctx.lineTo(11.5 * r, 5 * r);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
    ctx.restore();
    ctx.save();
    ctx.fillStyle = col;
    ctx.beginPath();
    ctx.moveTo(6 * r, 11.5 * r);
    ctx.bezierCurveTo(6 * r, 11.2239 * r, 5.77614 * r, 11 * r, 5.5 * r, 11 * r);
    ctx.bezierCurveTo(5.22386 * r, 11 * r, 5 * r, 11.2239 * r, 5 * r, 11.5 * r);
    ctx.lineTo(5 * r, 13.5 * r);
    ctx.bezierCurveTo(5 * r, 14.3284 * r, 5.67157 * r, 15 * r, 6.5 * r, 15 * r);
    ctx.lineTo(8.5 * r, 15 * r);
    ctx.bezierCurveTo(8.77614 * r, 15 * r, 9 * r, 14.7761 * r, 9 * r, 14.5 * r);
    ctx.bezierCurveTo(9 * r, 14.2239 * r, 8.77614 * r, 14 * r, 8.5 * r, 14 * r);
    ctx.lineTo(6.5 * r, 14 * r);
    ctx.bezierCurveTo(6.22386 * r, 14 * r, 6 * r, 13.7761 * r, 6 * r, 13.5 * r);
    ctx.lineTo(6 * r, 11.5 * r);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
    ctx.restore();
    ctx.save();
    ctx.fillStyle = col;
    ctx.beginPath();
    ctx.moveTo(15 * r, 11.5 * r);
    ctx.bezierCurveTo(15 * r, 11.2239 * r, 14.7761 * r, 11 * r, 14.5 * r, 11 * r);
    ctx.bezierCurveTo(14.2239 * r, 11, 14 * r, 11.2239 * r, 14 * r, 11.5 * r);
    ctx.lineTo(14 * r, 13.5 * r);
    ctx.bezierCurveTo(14 * r, 13.7761 * r, 13.7761 * r, 14 * r, 13.5 * r, 14 * r);
    ctx.lineTo(11.5 * r, 14 * r);
    ctx.bezierCurveTo(11.2239 * r, 14 * r, 11 * r, 14.2239 * r, 11 * r, 14.5 * r);
    ctx.bezierCurveTo(11 * r, 14.7761 * r, 11.2239 * r, 15 * r, 11.5 * r, 15 * r);
    ctx.lineTo(13.5 * r, 15 * r);
    ctx.bezierCurveTo(14.3284 * r, 15 * r, 15 * r, 14.3284 * r, 15 * r, 13.5 * r);
    ctx.lineTo(15 * r, 11.5 * r);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
    ctx.restore();
    ctx.save();
    ctx.fillStyle = col;
    ctx.beginPath();
    ctx.moveTo(3 * r, 5 * r);
    ctx.bezierCurveTo(3 * r, 3.89543 * r, 3.89543 * r, 3 * r, 5 * r, 3 * r);
    ctx.lineTo(15 * r, 3 * r);
    ctx.bezierCurveTo(16.1046 * r, 3 * r, 17 * r, 3.89543 * r, 17 * r, 5 * r);
    ctx.lineTo(17 * r, 15 * r);
    ctx.bezierCurveTo(17 * r, 16.1046 * r, 16.1046 * r, 17 * r, 15 * r, 17 * r);
    ctx.lineTo(5 * r, 17 * r);
    ctx.bezierCurveTo(3.89543 * r, 17 * r, 3 * r, 16.1046 * r, 3 * r, 15 * r);
    ctx.lineTo(3 * r, 5 * r);
    ctx.closePath();
    ctx.moveTo(4 * r, 5 * r);
    ctx.lineTo(4 * r, 15 * r);
    ctx.bezierCurveTo(4 * r, 15.5523 * r, 4.44772 * r, 16 * r, 5 * r, 16 * r);
    ctx.lineTo(15 * r, 16 * r);
    ctx.bezierCurveTo(15.5523 * r, 16 * r, 16 * r, 15.5523 * r, 16 * r, 15 * r);
    ctx.lineTo(16 * r, 5 * r);
    ctx.bezierCurveTo(16 * r, 4.44772 * r, 15.5523 * r, 4 * r, 15 * r, 4 * r);
    ctx.lineTo(5 * r, 4 * r);
    ctx.bezierCurveTo(4.44772 * r, 4 * r, 4 * r, 4.44772 * r, 4 * r, 5 * r);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
    ctx.restore();
    ctx.restore();
    return canvas.toDataURL('image/png');
};

export { ScreenshotImage };